<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>

    <style>
        .form-body {
            margin-top: 20px;
        }
    </style>
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>

<body>
<blockquote class="layui-elem-quote">数据库操作</blockquote>
<%
    String msg = (String) request.getAttribute("result");
    if (msg != null) {
%>
<script>
    layui.use('layer', function () {
        const layer = layui.layer;
        const msg = "<%=msg%>";
        if (msg === "成功插入一条信息") {
            layer.msg(msg, {icon: 6});
        } else {
            layer.msg(msg, {icon: 5});
        }

    });
</script>
<%}%>

<%@include file="WEB-INF/jsp/insertCoustomer.jsp" %>
<div class="layui-container">
    <div class="layui-row form-body">
        <div class="layui-col-md12">
            <%@include file="WEB-INF/jsp/showCustomer.jsp" %>
        </div>

    </div>
</div>


<%--table--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button
                type="button"
                class="layui-btn layui-btn-normal"
                lay-event="add"
        >
            <i class="layui-icon">&#xe654;</i>增加
        </button>
        <button type="button" class="layui-btn  layui-btn-disabled">
            <i class="layui-icon">&#xe642;</i>编辑
        </button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-disabled">
            <i class="layui-icon ">&#xe640;</i>删除
        </button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-disabled" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
    >删除</a
    >
</script>

<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        const $ = layui.$;
        const table = layui.table;
        const layer = layui.layer;
        const form = layui.form;

        //表格start
        table.render({
            elem: "#demo",
            height: 530,
            url: "/ShowServlet", //数据接口
            toolbar: "#toolbarDemo", //开启头部工具栏，并为其绑定左侧模板
            page: true, //开启分页
            cols: [
                [
                    //表头
                    {type: "checkbox"},
                    {field: "id", title: "ID", width: 80, sort: true},
                    {field: "name", title: "name", width: 80},
                    {field: "email", title: "email", width: 180},
                    {field: "balance", title: "balance", width: 80},
                    {
                        fixed: "right",
                        title: "操作",
                        toolbar: "#barDemo",
                        width: 150,
                    },
                ],
            ],
        });
        //监听行工具事件
        table.on("tool(test)", function (obj) {
            const data = obj.data;
            //console.log(obj)
            if (obj.event === "del") {
                layer.confirm("真的删除行么", function (index) {
                    // const id = obj.data.id;
                    // window.location.href = "/deleteCustomer?id=" + id;
                    // layer.close(index);
                    const id = obj.data.id;
                    $.ajax({
                        url: "/deleteCustomer?id=" + id,
                        type: "POST",
                        success: function (msg) {
                            if (msg) {
                                //删除这一行
                                obj.del();
                                //关闭弹框
                                layer.msg("删除成功", {icon: 6});
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        },
                        error: function () {
                            layer.msg("删除失败", {icon: 5});
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === "edit") {
                layer.prompt(
                    {
                        formType: 2,
                        value: data.username,
                    },
                    function (value, index) {
                        obj.update({
                            username: value,
                        });
                        layer.close(index);
                    }
                );
            }
        });
        table.on("toolbar(test)", function (obj) {
            switch (obj.event) {
                case "add":
                    layer.open({
                        type: 1,
                        title: '插入数据',
                        skin: 'layui-layer-molv',
                        area: ['500px'],
                        content: $('#insert-layer')
                    });
                    break;
                default:
                    break;
            }
        });


    });
</script>
</body>
</html>
